// 登录

.e-login{
    // Aside
    .e-login-aside {
        padding: 3rem 3.5rem;
        background-repeat: no-repeat;
        background-size: cover;  

        .e-login-logo {
            display: flex;
        }

        .e-login-title {
            color: #fff;
            font-size: 2rem;
            font-weight: 500;                    
        }     

        .e-login-subtitle {
            font-size: 1.2rem;
            font-weight: 200;
            margin: 2.5rem 0 3.5rem 0;
            color: rgba(#fff, .7);
        }

        .e-login-info {
            display: flex;
            justify-content: space-between;

            .e-login-menu {
                > a {
                    text-decoration: none;
                    color: #fff;
                    margin-right: 2rem;
                    display: inline-block; 

                    @include e-link-color(rgba(#fff, .7), #fff);

                    &:last-child {
                        margin-right: 0;
                    }                            
                }  
            } 

            .e-login-copyright {
                color: rgba(#fff, .4);
            }     
        }
    }

    // Wrapper
    .e-login-wrapper {
        padding: 3rem 3rem;
        background: #fff;

        // Head
        .e-login-head {
            font-size: 1rem;
            font-weight: 500;
            text-align: right;

            .e-login-signup-label {
                color: e-base-color(label, 2);
            }

            .e-login-signup-link {
                color: e-brand-color();
            }
        } 

        // Body
        .e-login-body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;

            // Form Wrapper
            .e-login-form {
                width: 100%;
                max-width: 450px;

                .e-login-title {
                    display: block;
                    text-align: center;
                    margin-bottom: 5rem;
                    text-decoration: none;

                    > h3 {
                        font-size: 2rem;
                        color: #67666e;
                    }
                }

                // Form
                .e-form {
                    margin: 4rem auto;                      

                    .form-group {
                        margin: 0;
                        padding: 0;                   
                        margin: 0 auto;                                   

                        .form-control {            
                            border: none;                         
                            height: 50px;        
                            margin-top: 1.25rem;  
                            background-color: rgba(#f7f7f9, .7);
                            padding-left: 1.25rem;
                            padding-right: 1.25rem;
                            transition: background-color .3s ease;

                            &:focus {
                                transition: background-color .3s ease;
                                background-color: #f7f7f9;
                            }  
                        }
                        .input-group-append{
                            height: 50px;
                            margin-top: 1.25rem;
                        }
                    }        
                } 

                // Action
                .e-login-actions {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 3rem 0;

                    .e-login-link-forgot {
                        @include e-link-color(e-base-color(label, 2), e-brand-color());
                    }

                    .e-login-btn-secondary,
                    .e-login-btn-primary {
                        height: 50px;
                        padding-left: 2.5rem;
                        padding-right: 2.5rem;
                    }
                }

                // Divider
                .e-login-divider {
                    margin: 1rem 0 2rem 0;

                    &:not(:first-child):not(:last-child) {
                        font-weight: 400;  
                        color: #b5b2c3;  
                        font-size: 1rem;                       
                    }
                }            

                // Options
                .e-login-options {
                    display: flex;
                    justify-content: center;
                    justify-content: space-between;
                    max-width: 100%;

                    > a {                            
                        text-decoration: none;                              
                        flex: 1;
                        justify-content: center;
                        align-items: center;  
                        display: flex;

                        &:not(:first-child):not(:last-child) {
                            margin: 0 1.5rem;                     
                        }                                                                                          
                    } 
                }
            } 
        }   
    }    

    @include e-desktop {
        // Aside
        .e-login-aside {
            flex: 1;
        }
        .e-login-aside {
            width: 65%;
        }
    }

    @include e-tablet-and-mobile() {
        // Aside
        .e-login-aside {
            width: 100%;
            height: auto; 
            padding: 2rem 1.5rem;

            .e-login-logo {
                margin-bottom: 2.5rem;
            }
               
            .e-login-info {
                margin-top: 2rem;
            }

            .e-login-subtitle {
                margin: 2rem 0;                            
            }            
        }  

        // Wrapper
        .e-login-wrapper {
            padding: 3rem 1.5rem; 

            .e-login-head {
                padding-left: 2rem;
                right: 2rem;    
            }  

            .e-login-body {
                display: flex;
                justify-content: center;
                align-items: center; 
                margin-top: 5rem; 

                .e-login-form {
                    .e-login-options {
                        > a {                         
                            &:not(:first-child):not(:last-child) {
                                margin: 0 .8rem;
                            }
                        }                                                                                              
                    }
                }
            }                          
        } 
    }
}      